/*
 * @Date: 2025-07-20 19:26:24
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-09-18 00:20:44
 * @FilePath: /admin-vue/src/stores/useThemeStore.ts
 */
import { usePreferredColorScheme } from '@vueuse/core'
import { defineStore } from 'pinia'

export const useThemeStore = defineStore('useThemeStore', () => {
  const settings = ref({
    themeScheme: 'auto',
    themeColor: '#409eff',
    layout: {
      mode: 'vertical',
      scrollMode: 'content',
      reverseHorizontalMix: false,
    },
    sider: {
      inverted: false,
      width: 200,
      collapsedWidth: 64,
      mixWidth: 90,
      mixCollapsedWidth: 64,
      mixChildMenuWidth: 200,
    },
    header: {
      inverted: false,
      height: 64,
      multilingual: {
        visible: true,
      },
    },
    content: {
      nativeScrollbar: false,
    },
  })

  const osTheme = usePreferredColorScheme()

  /** Dark mode */
  const darkMode = computed(() => {
    if (settings.value.themeScheme === 'auto') {
      return osTheme.value === 'dark'
    }
    return settings.value.themeScheme === 'dark'
  })

  return {
    ...toRefs(settings.value),
    darkMode,
  }
})
